import React, { FC, useState } from "react";
import { Form, Input, Button, Card, Typography, message } from "antd";
import { UserOutlined, LockOutlined } from "@ant-design/icons";

import {
    BrowserRouter
} from "react-router-dom";
import { login } from '../../Request/login';

import { MyRouter } from '../../Layout/MyRouter';

const { Title } = Typography;

interface Values {
    username: string;
    password: string;
}

const LoginForm: FC = () => {
    const [isLogin, setIsLogin] = useState(false);
    const [username, setUsername] = useState<string | undefined>();
    const onFinish = (values: Values) => {

        login(values).then((data) => {
            if (data){
                setUsername(data.username);
                setIsLogin(true);
            } else {
                message.error("Invalid username or password!")
            }
        })
    };

    return (
        <div
            style={{
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                height: "100vh",
            }}
        >
            {
                !isLogin && <Card style={{ width: 500 }}>
                    <div style={{ display: "flex", justifyContent: "center" }}>
                        <Title level={2}>Plane Scheduling System</Title>
                    </div>
                    <Form
                        name="normal_login"
                        className="login-form"
                        initialValues={{ remember: true }}
                        onFinish={onFinish}
                    >
                        <Form.Item
                            name="username"
                            rules={[{ required: true, message: "Please input your Username!" }]}
                        >
                            <Input
                                prefix={<UserOutlined className="site-form-item-icon" />}
                                placeholder="Username"
                            />
                        </Form.Item>
                        <Form.Item
                            name="password"
                            rules={[{ required: true, message: "Please input your Password!" }]}
                        >
                            <Input
                                prefix={<LockOutlined className="site-form-item-icon" />}
                                type="password"
                                placeholder="Password"
                            />
                        </Form.Item>
                        <Form.Item>
                            <Button
                                type="primary"
                                htmlType="submit"
                                className="login-form-button"
                                block
                            >
                                Log in
                            </Button>
                        </Form.Item>
                    </Form>
                </Card>
            }
            {
                isLogin && <BrowserRouter>
                    <MyRouter username={username}></MyRouter>
                </BrowserRouter>
            }
        </div>
    );
};

export default LoginForm;